<template>
  <div class="datacenter-wrapper">
    <div class="mask"></div>
    <div class="datacenter-content">
      <div class="datacenter-content-header">
        <div class="datacenter-content-header-left-wrapper">
          <div class="button"
            @click="backToCompany"
            v-if="userRole!=='ROLE_USER'">
            <i class="fa fa-mail-reply"
              aria-hidden="true"></i>
          </div>
          <div class="weather">
            <div>
              <span>{{moment().format('YYYY-MM-DD HH:mm:ss')}}</span>
              <span>{{moment().format('dddd')}}</span>
            </div>
            <div>
              <span>{{weatherInfo.cityName}}</span>
              <span>{{weatherInfo.weatherInfo}}</span>
              <span>{{weatherInfo.temperatureInfo}}</span>
              <span>{{weatherInfo.windInfoText}}</span>
            </div>
          </div>
          <div class="image"
            v-if="weChatUrl">
            <img :src="weChatUrl"
              alt="微信二维码"
              width="100%"
              height="100%">
          </div>
        </div>
        <div class="datacenter-content-header-title">
          <h2>用电安全物联网平台</h2>
        </div>
        <div class="datacenter-content-header-right-wrapper">
          <ul class="nomanage nomanage-3">
            <li v-for="(item,index) in navHeader"
              v-if="item.children">
              <Dropdown trigger="click"
                v-if="item.children"
                placement="bottom-start"
                transfer-class-name="transfer-class-name-header">
                <a href="javascript:void(0)"
                  :class="dianQiHuoZaiCurrent1(item)">
                  <span class="fa"
                    :class="item.className"></span>
                  {{item.name}}
                  <Icon type="ios-arrow-down"></Icon>
                </a>
                <Menu slot="list"
                  :active-name="activeName1(item)"
                  @on-select="handleChangeRoute">
                  <MenuItem :name="subItem.path"
                    v-for="(subItem,subIndex) in item.children"
                    :key="subIndex">
                  <i class="fa"
                    :class="subItem.className"></i>
                  {{subItem.name}}
                  </MenuItem>
                </Menu>
              </Dropdown>
              <router-link v-else
                :to="item.path"
                tag="a"
                :class="{'current':$route.path.startsWith(item.path) }">
                <span class="fa"
                  :class="item.className"></span>
                {{item.name}}
              </router-link>
            </li>
            <!-- 显示的情况是通过企业进入 -->
            <!-- <li v-if="isshow">
              <a style="cursor:pointer;" @click.stop.prevent="backToCompany">
                <span class="fa fa-arrow-circle-right"></span>
                返回管理系统
              </a>
            </li> -->
            <!-- ROLE_DEMO -->
            <!-- <li v-if="userRole==='ROLE_DEMO'">
              <a @click.stop.prevent="_logout" style="cursor: pointer;">
                <span class="fa fa-power-off"></span>
                退出系统
              </a>
            </li> -->
          </ul>
          <div class="login-out"
            @click="_logout"
            v-if="userRole==='ROLE_USER'||userRole==='ROLE_PLATFORM'">
            <i class="fa fa-power-off"
              aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="datacenter-content-body">
        <div class="inner-body">
          <div class="inner-body-left">
            <!-- 安全评估 -->
            <div class="box-wrapper">
              <anquanpinggu :companyId="companyId"></anquanpinggu>
            </div>
            <!-- 隐患分析 -->
            <div class="box-wrapper">
              <yinhuanfenxi :companyId="companyId"></yinhuanfenxi>
            </div>
            <!-- 近期异常事件 -->
            <div class="box-wrapper">
              <yichangshijian :companyId="companyId"></yichangshijian>
            </div>
          </div>
          <div class="inner-body-middle">
            <!-- 系统概况 -->
            <div class="box-wrapper">
              <xitonggaikuang :companyId="companyId"></xitonggaikuang>
            </div>
          </div>
          <div class="inner-body-right">
            <!-- 能耗统计 -->
            <div class="box-wrapper">
              <nenghaotongji :companyId="companyId"></nenghaotongji>
            </div>
            <!-- 用电分析 -->
            <div class="box-wrapper">
              <div class="box-content">
                <div class="box-content-header">
                  <p>用电分析</p>
                </div>
                <div class="box-content-body">
                  <yongdianfenxi :companyId="companyId"></yongdianfenxi>
                </div>
              </div>
            </div>
            <!-- 实时功率Top3 -->
            <div class="box-wrapper">
              <div class="box-content">
                <div class="box-content-header">
                  <p>实时功率Top3</p>
                </div>
                <div class="box-content-body">
                  <top3 :companyId="companyId"></top3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/styles/datacenter.scss'
import '@/assets/font/icomoon1/index.css'

import { getIndexNavigator } from '@/api'
import mixin from '@/pages/PermissionMixin'

const anquanpinggu = () => import('./anquanpinggu')
const nenghaotongji = () => import('./nenghaotongji')
const top3 = () => import('./top3')
const yongdianfenxi = () => import('./yongdianefenxi')
const yinhuanfenxi = () => import('./yinhuanfenxi')
const yichangshijian = () => import('./yichangshijian')
const xitonggaikuang = () => import('./xitonggaikuang')

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import {
  tabOfAdmin,
  tabOfUser,
  tabOfUserHasVideo,
  tabOfUserHasTem,
  tabOfUserHasVideoAndTem,
  nameUserNav,
  nameAdminNav,
  genSpecialFunction
} from '@/utils/navTabList'

import { getCompanyDetailByCompanyId } from '@/api'

const dianQiHuoZaiRoute = [
  {
    id: '/alarm',
    name: '/alarm'
  },
  {
    id: '/history',
    name: '/history'
  },
  {
    id: '/offline',
    name: '/offline'
  },
  {
    id: '/offline/log',
    name: '/offline'
  }
]
const dianQiHuoZaiRoute1 = [
  {
    id: '/user/device',
    name: '/user/device'
  },
  {
    id: '/user/errorthing',
    name: '/user/errorthing'
  },
  {
    id: '/user/history',
    name: '/user/history'
  },
  {
    id: '/user/report',
    name: '/user/report'
  },
  {
    id: '/analysis/report',
    name: '/analysis/report'
  }
]

const qitajiankongRoute = [
  {
    id: '/user/video',
    name: '/user/video'
  },
  {
    id: '/user/temperature',
    name: '/user/temperature'
  }
]

export default {
  mixins: [mixin],
  components: {
    anquanpinggu,
    nenghaotongji,
    top3,
    yongdianfenxi,
    yinhuanfenxi,
    yichangshijian,
    xitonggaikuang
  },

  mounted() {
    this.init()
  },
  methods: {
    ...mapActions(['logout', 'getCompanyInfo']),
    ...mapMutations(['SET_COMPANY_INFO']),

    _logout() {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>即将退出</p><p>是否继续？</p>',
        onOk: () => {
          this.logout().then(() => {
            this.$Message.info('退出登录')
            setTimeout(() => {
              location.reload()
            }, 300)
          })
        },

        onCancel: () => {
          return false
        }
      })
    },

    backToCompany() {
      this.SET_COMPANY_INFO(null)
      if (this.userRole === 'ROLE_DEMO') {
        this.$router.push('/dashboard')
      } else if (this.userRole === 'ROLE_PLATFORM') {
        this.$router.push('/agent')
      } else {
        this.$router.replace('/company')
      }
    },

    goBack() {
      this.$router.push('/')
    },

    buildNav(id) {
      const vm = this
      getCompanyDetailByCompanyId(id).then(res => {
        const { data } = res
        vm.companyInfo = data
        vm.navHeader = [...tabOfUser]
        const { thermalImager, humitureState, sysFunc } = data
        const params = {
          thermalImager,
          humitureState
          // iot: sysFunc === 2 ? true : false
        }
        vm.navHeader = genSpecialFunction(params)
      })
    },

    handleChangeRoute(path) {
      this.$router.push({
        path
      })
    },

    init() {
      const companyId = this.companyId
      if (!companyId) return
      const params = { companyId }
      getIndexNavigator(params).then(res => {
        const { qrCodeURL, weathers } = res.data
        this.weChatUrl = qrCodeURL
        this.weatherInfo = weathers
      })
    },

    dianQiHuoZaiCurrent1(item) {
      const path = this.$route.path
      if (item.name === '智慧用电') {
        const result = dianQiHuoZaiRoute1.find(t => t.id === path)
        if (result) {
          return 'current'
        }
      } else {
        const result = qitajiankongRoute.find(t => t.id === path)
        if (result) {
          return 'current'
        }
      }
    },

    activeName1(item) {
      const path = this.$route.path
      if (item.name === '智慧用电') {
        const reulst = dianQiHuoZaiRoute1.find(t => t.id === path)
        if (reulst) {
          return reulst.name
        }
      } else {
        const result = qitajiankongRoute.find(t => t.id === path)
        if (result) {
          return result.name
        }
      }
    }
  },

  data() {
    return {
      isshow: false,
      navHeader: [],
      roleManage: true,
      weChatUrl: null,
      weatherInfo: {}
    }
  },

  computed: {
    ...mapGetters(['storeCompanyId']),
    ...mapState({
      userRole: state => state.userInfo.rname,
      companyIDByUser: state => state.userInfo.companyId
    }),
    activeName() {
      const path = this.$route.path
      const reulst = dianQiHuoZaiRoute.find(t => t.id === path)
      if (reulst) {
        return reulst.name
      } else {
        return ''
      }
    },
    dianQiHuoZaiCurrent() {
      const path = this.$route.path
      const reulst = dianQiHuoZaiRoute.find(t => t.id === path)
      if (reulst) {
        return 'current'
      } else {
        return ''
      }
    }
  },

  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        const vm = this
        const userRole = this.userRole
        const storeCompanyId = this.storeCompanyId // admin
        const companyIDByUser = this.companyIDByUser // userInfo
        if (nameAdminNav.indexOf(val.name) > -1) {
          this.isshow = false
          vm.navHeader = [...tabOfAdmin]
        } else {
          // 运营账号、代理商账号、管理员、演示账号访问user模块
          if (
            storeCompanyId &&
            (userRole === 'ROLE_OPERATION' ||
              userRole === 'ROLE_ADMIN' ||
              userRole === 'ROLE_DEMO')
          ) {
            console.log(`${userRole}访问user路径`)
            this.buildNav(storeCompanyId)
            this.isshow = true
            this.roleManage = false
          } else if (companyIDByUser && userRole === 'ROLE_USER') {
            console.log('user访问user')
            this.buildNav(companyIDByUser)
            this.isshow = false
            this.roleManage = false
          } else if (storeCompanyId && userRole === 'ROLE_PLATFORM') {
            console.log('代理商访问user')
            this.buildNav(storeCompanyId)
            this.isshow = false
            this.roleManage = false
          } else {
            console.error('未匹配到选项')
            console.log(userRole, this.$route)
          }
        }
      }
    },
    companyId() {
      this.init()
    }
  }
}
</script>